new Vue({
    el:'#root',
    data:{
        todoList:[
            {
                id:1,
                content:"完成今日内容的总结",
                isChecked:false
            },
            {
                id:2,
                content:"看电视剧",
                isChecked:true
            },
            {
                id:3,
                content:"逛街",
                isChecked:false
            }
        ],
    },
    methods:{
        //控制删除按钮的显示
        isShow(e,flag){
            if(flag){
                e.target.querySelector('.btn').style.display = 'block';
            }else {
                e.target.querySelector('.btn').style.display = 'none';
            }

        },
        //添加list
        addList(e){
            const content = e.target.value.trim();
            if(content !== ''){
                const id = this.todoList[this.todoList.length-1].id +1;
                this.todoList.push({
                    id,
                    content,
                    isChecked:false
                })
                e.target.value = '';
            }else {
                alert('请输入内容');
                e.target.value = '';
            }
        },
        //单个选择完成
        isFinished(e,id){
            this.todoList = this.todoList.map((item) => {
                if (item.id === id) {
                    item.isChecked = e.target.checked;
                }
                return item;
            });
        },
        //一键全选 / 全不选
        allFinished(e){
            this.todoList = this.todoList.map((item) => {
                 item.isChecked = e.target.checked;
                 return item;
            });
        },
        //单个删除
        deleteList(id){
            const isConfirmed = confirm("确定要删除这个任务吗??");
            if (isConfirmed) {
                this.todoList = this.todoList.filter(item=>{
                    return item.id !== id;
                })
            }
        },
        //全部删除
        allDelete(){
            this.todoList = this.todoList.filter(item=>{
                return item.isChecked === false;
            })
        }
    },
    computed:{
        total(){
            return this.todoList.length
        },
        finished(){
            return this.todoList.filter(item=>{
                return item.isChecked === true;
            }).length;
        }

    }

})